Projeto de UX / Product Design
Mestry
Transformando complexidade em clareza para decisões de marketing.
Plataforma de inteligência e gestão de performance para marketing e mídia paga
Ler o projeto ↓
Papel
UX estrategista
Frentes
Design system, PRs, testes de usabilidade
Ferramentas
Figma, Figma Make, VS Code, IA
Produto
SaaS de performance · pt-BR
Nos bastidores
Complexidade
Na frente
Clareza
O desafio não era organizar dados. Era organizar a complexidade para que o usuário pudesse decidir.
01 O contexto
Quanto mais dados a operação gera, mais difícil fica enxergar o que realmente importa.
A Mestry é uma plataforma de inteligência e gestão de performance para marketing e mídia paga. Ela centraliza campanhas, anúncios, vendas, custos, conversões, métricas financeiras e diferentes fontes de mídia em um único lugar.
Foi criada para quem opera mídia paga no dia a dia: gestores de tráfego, times de performance e responsáveis por resultado. Essas pessoas trabalham com dados vindos de plataformas diferentes, cada uma com sua própria lógica, nomenclatura e recorte de tempo.
Problema de negócio
Decisão de mídia depende de leitura rápida. Dado fragmentado atrasa a decisão.
Cenário inicial
Muita informação disponível, pouca hierarquia entre o que é panorama e o que é detalhe.
02 A dor
O problema não era falta de dados. Era excesso deles.
Meta Ads
Google Ads
TikTok Ads
Vendas
Custos
Conversões
Financeiro
Campanhas
Anúncios
Espaços
01
Excesso de informação na mesma camada
02
Dificuldade para encontrar o que é relevante
03
Métricas espalhadas entre áreas do produto
04
Dificuldade de interpretar o resultado
05
Filtros e configurações complexas
06
Falta de hierarquia visual
07
Padrões diferentes para o mesmo tipo de tarefa
08
Dificuldade para transformar dado em decisão
03 O desafio de UX
Como reduzir a complexidade percebida sem esconder a complexidade real da operação?
Organizar grandes volumes de dados em camadas de leitura
Criar hierarquia de informação orientada à decisão
Reduzir carga cognitiva sem remover controle
Tornar filtros e configurações previsíveis
Facilitar comparação de performance entre contextos
Criar um sistema visual consistente e escalável
04 Princípios de design
O framework que guiou cada decisão
Cinco princípios usados como critério de aceite em revisão de design e em PR.
01
Clareza antes da complexidade
Mostrar primeiro o que importa. O resto é acessível, não simultâneo.
02
Hierarquia orientada à decisão
A tela responde “o que está acontecendo?” antes de mostrar detalhe.
03
Consistência
O mesmo componente se comporta igual em qualquer contexto do produto.
04
Progressive disclosure
Complexidade aparece quando é necessária, no ponto em que é necessária.
05
Dados contam uma história
Não basta apresentar métricas. É preciso facilitar sua interpretação.
05 Ferramentas e workflow
Como o trabalho acontecia na prática
Cinco ferramentas, cada uma em um ponto específico do processo. Nenhuma delas substitui a decisão de design.
Claude
ChatGPT
Figma
Figma Make
VS Code
01
Enquadrar
Claude e ChatGPT para transformar um pedido difuso em pergunta de design: mapear fontes de dado, listar o que compete pela atenção do usuário e separar o que é panorama do que é detalhe.
02
Estruturar
Arquitetura de informação e redação da microcopy em pt-BR antes de qualquer pixel. O texto da interface é decidido junto com a hierarquia, não depois dela.
03
Desenhar
Figma como fonte de verdade: tokens, componentes, estados e as telas compostas a partir deles. Toda tela nova nasce de padrão existente ou promove um padrão novo ao design system.
04
Prototipar
Figma Make para tornar a ideia navegável rápido e levar a teste de usabilidade. Interação duvidosa vira protótipo antes de virar especificação.
05
Entregar e revisar
VS Code para ler a implementação, ajustar detalhe de token e espaçamento e revisar PR. O design system é verificado no código, não só no arquivo.
IA entra para acelerar leitura de problema e exploração. A decisão de hierarquia, de padrão e de o que não entra na tela continua sendo trabalho de design.
06 Decisões de UX
Quatro decisões e o que elas resolveram
Cada decisão segue a mesma estrutura: problema, contexto, decisão, solução, impacto. Onde não há dado quantitativo, o impacto é declarado de forma qualitativa.
Decisão 01
Domínios
Uma lista longa em que todo item parecia igualmente urgente
Problema
Dezenas de domínios em estados diferentes (ativo, pendente, inválido), sem nada indicando onde havia ação pendente.
Contexto
Verificação de domínio é assíncrona: o usuário sai da tela, o estado muda sozinho e ele volta sem saber o que mudou.
Decisão
Transformar o estado no eixo principal da tabela: badge com cor semântica, coluna de última verificação em linguagem relativa (“Verificado agora”, “Restam 21h 15min”) e busca e filtro por status no topo.
Impacto
Maior clareza na leitura da lista e menos necessidade de reverificar item por item.
Decisão 02
Funnel builder
Construir o funil e ler a performance dele eram duas tarefas separadas
Problema
O usuário montava a estrutura em um lugar e conferia o resultado em outro, perdendo a relação entre etapa e desempenho.
Contexto
Um funil tem muitas etapas e ofertas. Exibir tudo com o mesmo peso torna o canvas ilegível em poucos nós.
Decisão
Um canvas com etapas no topo como âncora de navegação, métrica essencial dentro do nó (visitantes/h, preço por oferta), ponto de estado por item e o painel de estados agregados no canto. Ferramentas de edição concentradas em uma barra inferior, fora do caminho da leitura.
Impacto
Estrutura e performance passam a ser lidas no mesmo lugar, sem troca de contexto.
Decisão 03
Meta de faturamento
A métrica que define o sucesso da operação estava dentro de um relatório
Problema
Para saber se a operação estava perto ou longe da meta, era preciso abrir uma tela específica e interpretar números.
Contexto
Faturamento é o critério de decisão que atravessa todas as áreas do produto e não pertence a nenhuma tela em particular.
Decisão
Levar a meta para o chrome global: barra de progresso persistente no topo, com valor atual e alvo sempre visíveis. E fechar o ciclo com um marco explícito quando a meta é batida, em vez de deixar o resultado passar em silêncio.
Impacto
O contexto de resultado acompanha o usuário em qualquer área do produto.
Decisão 04
Configurações
Configuração é onde o excesso de opção mais custa
Problema
Ajustes de conta, segurança e preferências disputavam a mesma tela, sem indicar onde o usuário estava nem o que cada grupo afetava.
Contexto
São tarefas raras e de alto risco. O usuário precisa de certeza, não de velocidade.
Decisão
Sub-navegação com título e descrição por grupo (“Dados básicos”, “configure seus dados básicos”), leitura como estado padrão e edição como ação explícita em “Editar dados”. O mesmo padrão foi replicado em todas as áreas de configuração.
Impacto
Maior previsibilidade e menor risco de alteração acidental.
07 Design system
Uma ferramenta de produto, não uma biblioteca visual
Tokens, componentes e estados mantidos em Figma e revisados em código, via PR, junto ao time de desenvolvimento.
Cor
Primário
Canvas
Superfície
Painel
Status
Tipografia
Título de página · 32 / 700
Seção · 22 / 700
Corpo · 15 / 400 · descrições e apoio
EYEBROW · 11 / 700
Componentes e estados
Salvar alterações
Editar dados
Cancelar
Ativo
Pendente
Inválido
Ex.: email@email.com
Selecione
Consistência entre áreas
Um único vocabulário de tabela, filtro, badge e formulário atendendo campanhas, custos, domínios e configurações.
Velocidade de novas telas
Novas áreas nascem compostas por padrões existentes, reduzindo decisão visual repetida.
Previsibilidade para quem usa
O mesmo gesto produz o mesmo resultado em qualquer parte do produto.
Manutenção e escala
Ajuste no token propaga para o produto inteiro, sem retrabalho tela a tela.
08 A solução
A mesma lógica, da entrada ao detalhe
Entrada
Um único caminho, uma única ação primária e a prova visual do produto ao lado.
Operação
Estado em primeiro plano, busca e filtro no topo, paginação previsível.
Construção
Canvas de funil com métrica no nó e ferramentas fora do caminho da leitura.
09 O resultado
Impacto em três dimensões
Os impactos abaixo são qualitativos. Métricas quantitativas de uso serão adicionadas quando estiverem disponíveis.
Experiência
Mais clareza e previsibilidade
Redução da complexidade percebida e maior clareza na leitura das informações.
Produto
Consistente e escalável
Maior consistência entre fluxos e menor dependência de padrões diferentes para a mesma tarefa.
Negócio
Suporte à decisão
A informação que sustenta a decisão de mídia fica disponível no momento em que ela acontece.
10 Aprendizados
O que eu levo deste projeto
01
Em produtos orientados a dados, mostrar menos não significa simplificar. A simplificação real está em organizar a informação certa no momento certo.
02
Design system não é consistência visual. É uma ferramenta para escalar decisões de UX.
03
Quanto mais complexo o produto, mais cedo a hierarquia de informação precisa ser decidida.
Complexidade nos bastidores.
Clareza na frente.
Clareza na frente.
Mestry, transformando dados em decisões.